/*
 * @Author: xuchao 
 * @Date: 2018-05-16 14:10:53 
 * @Last Modified by: xuchao
 * @Last Modified time: 2018-06-12 09:33:49
 */
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Layout } from 'antd';
import './style.less';

export default class Talent extends Component {
    constructor(props){
        super(props)
        this.state = {
            list: [{
                url: require('@/static/images/talent-1.png'),
                title: '连云港/3年工作经验/本科',
                name: '张强',
                work: '渗透测试',
                money: '12-14K',
                data: '5年渗透测试实战经验，熟悉OWASP Top 10、各种漏扫工具使用'
            }, {
                url: require('@/static/images/talent-2.png'),
                title: '连云港/1年工作经验/大专',
                name: '王政',
                work: 'Web安全',
                money: '7-9K',
                data: '熟悉常见Web安全攻防技术及网站程序编码安全，代码审计能力'
            }, {
                url: require('@/static/images/talent-3.png'),
                title: '连云港/7年工作经验/本科',
                name: '张超群',
                work: '网络架构安全',
                money: '13-15K',
                data: '掌握主流防火墙、交换机安全配置、网络架构安全调整'
            }, {
                url: require('@/static/images/talent-4.png'),
                title: '连云港/5年工作经验/大专',
                name: '陈晨',
                work: '安全集成',
                money: '10-13K',
                data: '精通网络设备调试技术，服务器调试技术，基础应用平台调试技术或其中之'
            }, {
                url: require('@/static/images/talent-5.png'),
                title: '连云港/2年工作经验/本科',
                name: '李俊',
                work: '风险评估',
                money: '8-13K',
                data: '深刻理解网络基本概念，例如>ISO/OSI、TCP/IP、VLAN、WAN协议、各'
            }, {
                url: require('@/static/images/talent-6.png'),
                title: '连云港/10年工作经验/本科',
                name: '张家斌',
                work: '等保测评项目管理',
                money: '15-20K',
                data: '掌握等级安保护测评方案的拟制和沟通、汇报和项目的实施，测评报告'
            }]
        }
    }

    render() {
        const { list } = this.state;
        return (
            <Layout.Content className="talent">
                <div className="banner animated fadeIn">
                    <div className="search">
                        <input type="text" placeholder="请输入你感兴趣的人才关键词" />
                        <button>
                            <i />搜索
                        </button>
                    </div>
                </div> 
                <div className="center">
                    <img src={require('@/static/images/talent.jpg')} alt=""/>
                    <h1>人才推荐</h1>
                    <ul>
                        {
                            list && list.map((item, index) => {
                                return (
                                    <li key={index}>
                                        <div className="title">
                                            {item.title}
                                        </div>
                                        <div className="context">
                                            <div className="person">
                                                <img src={item.url} alt=""/>
                                                <p>{item.name}</p>
                                                <div className="star">
                                                    <em></em>
                                                    <em></em>
                                                    <em></em>
                                                    <em></em>
                                                    <em></em>
                                                </div>
                                            </div>
                                            <div className="info">
                                                <p>期望工作：<em>{item.work}</em></p>
                                                <p>期望工资：<em>{item.money}</em></p>
                                                <p>工作经验：<em>{item.data}</em></p>
                                            </div>
                                            <Link to="/talent/1">查看详情</Link>
                                        </div>
                                    </li>
                                )
                            })
                        }
                        
                    </ul>
                </div>
            </Layout.Content>
        );
    }
}